import React from "react";  
const msg = 'hello word!'
const mystyle = {backgroundColor: 'red'}
const mystyle2 = {backgroundColor: 'blue'}
let flag = false; //true 粉色   false  蓝色
let arr = ["刘备","张飞","关羽"]
export default class App1 extends React.Component {
    render(){
        return (
            <div>
                <h2>{msg}</h2>
                <hr />
                
                <label htmlFor="username"></label>
                <input type="text" id="username"/>
                <hr />
                <div className="box">盒子</div>
                <hr />
                <div style={flag ? mystyle : mystyle2}>内容</div>
                <hr />
                <ul>
                    {/* react中的列表循环有且只有map可以使用 
                        只有map有返回值，forEach没有
                    */}
                    {
                        arr.map((item,index)=> <li key={index}>{item}</li>)
                    }
                </ul>
            </div>
        )
    }
}